<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>待提货详情</title>
		<link rel="stylesheet" href="./css/readyTask.css" />
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
		<script type="module" src="./js/readyTask.js"></script>
		<script src="./js/flexible.js"></script>
	</head>
	<body>
		<!-- 顶栏 -->
		<div class="topPreset">
			<a href="javascript:;">
				<span class="iconfont icon-xiangzuo1"></span>
			</a>
			<h2>任务详情页面</h2>
			<!-- <div>取消任务</div> -->
		</div>
		<!-- 顶部站位 -->
		<div class="zhanwei"></div>
		<!-- 基本信息 -->
		<div class="essential">
			<div class="wrapper">
				<div class="info">
					<h4>基本信息</h4>
					<span>（任务编号:）</span>
					<!-- 展开 -->
					<div id="unfold">+</div>
				</div>
				<!-- 折叠层 -->
				<div class="hideEssential">
					<div class="content">
						<!-- 地址 -->
						<div class="address">
							<div class="go">
								<span class="slit"> 起 </span>
								<p>北京市昌平区回龙观街道西三旗桥东金55555555555</p>
							</div>
							<div class="pit"></div>
							<div class="to">
								<span class="slit"> 止 </span>
								<p>河南省郑州市路北区北清路99号</p>
							</div>
						</div>
						<!-- 司机电话发货日期等 -->
						<div class="text">
							<ul>
								<li>
									<p>联系人</p>
									<span class="name">张三</span>
								</li>
								<li>
									<p>联系电话</p>
									<span class="phone">13512345678</span>
									<img src="./image/电话_填充 2.png" alt />
								</li>
								<li>
									<p>提货时间</p>
									<span class="timego">2022.05.04 13:00</span>
								</li>
								<li>
									<p>预计送达时间</p>
									<span class="timeto">2022.05.05 10:00</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 车辆司机信息 -->
		<div class="driver">
			<div class="wrapper">
				<div class="info">
					<h4>车辆司机信息</h4>
					<div id="fold">+</div>
				</div>
				<!-- 用于折叠隐藏  -->
				<div class="hideDrive">
					<!-- 车牌号 -->
					<div class="plate">
						<div class="number">车牌号</div>
						<span class="num">动态渲染车牌号</span>
					</div>
					<div class="driverName">
						<div class="name">司机姓名</div>
						<span class="uname">动态渲染司机姓名</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 运输路线 -->
		<div class="transRoutes">
			<div class="wrapper">
				<div class="info">
					<h4>运输路线</h4>
					<div id="fold">+</div>
				</div>
				<!-- 折叠区 -->
				<div class="find">
					<ul>
						<li class="go">
							<div>北京市</div>
							<p>北京市</p>
						</li>
						<li class="img">
							<img src="./image/img_jiantou.png" alt />
						</li>
						<li class="destination">
							<div>河南省</div>
							<p>郑州市</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 货物信息 -->
		<div class="goodsInfo">
			<div class="wrapper">
				<div class="info">
					<h4>
						货物信息
						<span>共计30单</span>
					</h4>
					<div id="unfold">+</div>
				</div>
				<!-- 用于折叠隐藏 -->
				<div class="hidegoods">
					<!-- 搜索 -->
					<div class="serch">
						<div><img src="./image/搜索.png" alt /></div>
						<input type="text" placeholder="请输入单号" />
					</div>
					<ul>
						<li class="detail">
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>1件</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>2件</span>
							<span>6kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>

						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
						<li>
							<span class="textt">SD1234567890123</span>
							<span>1件</span>
							<span>5kg</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 提货信息 -->
		<div class="Delivery">
			<div class="wrapper">
				<div class="info">
					<h4>提货信息</h4>
					<div id="fold">+</div>
				</div>
				<!-- 用于折叠 -->
				<div class="hidedeli">
					<!-- 汇单凭证 -->
					<div class="voucher">
						<p>请拍照上传回单凭证</p>
						<!-- 上传的图片 -->
						<ul>
							<li><img src="./image/收据1.png" alt /></li>
							<li><img src="./image/收据2.png" alt /></li>
						</ul>
						<div class="firm">
							<input title="1" class="uploadFiles" type="file" />
							<img src="./image/加号.png" alt />
						</div>
					</div>
					<!-- 货品照片 -->
					<div class="goodsImag">
						<p>请拍照上传货品照片</p>
						<!-- 上传的图片 -->
						<ul>
							<li>
								<img src="./image/货品1.png" alt />
							</li>
						</ul>
						<div class="imgs">
							<input title="1" class="uploadFiles" type="file" />
							<img src="./image/加号.png" alt />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 延迟提货 -->
		<!-- 提货 -->
		<div class="delay">
			<button class="delayBtn">延迟提货</button>
			<button class="delivery">提货</button>
		</div>
		<div class="floatingTips">
			<span>请稍后</span>
		</div>
		<!-- 底部站位 -->
		<div class="dibuzhanwei"></div>
	</body>
</html>
